<template>
    <div class="editor">
        <textarea :value="input" class="input" @input="update"></textarea>
        <div class="output" v-html="output"></div>
    </div>
</template>


<script setup lang="ts">
import { marked } from 'marked'
import { debounce } from 'lodash-es'
import { ref, computed } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css' 
import { markedHighlight } from 'marked-highlight'

const input = ref("# hello\n```js\n console.log('hello')\n```")
// 计算属性用于根据输入的 Markdown 文本动态生成 HTML 输出。这样做的好处是，当输入内容变化时，输出会自动更新，而不需要手动调用更新函数。
// 使用计算属性可以提高性能，因为它们会缓存结果，只有在依赖的输入变化时才会重新计算。这使得代码更加简洁和高效。

const render = new marked.Renderer()
marked.setOptions({
  renderer: render, // 这是必填项
  gfm: true,	// 启动类似于Github样式的Markdown语法
  pedantic: false, // 只解析符合Markdwon定义的，不修正Markdown的错误
  sanitize: false, // 原始输出，忽略HTML标签（关闭后，可直接渲染HTML标签）

	// 高亮的语法规范
  highlight: (code, lang) => hljs.highlight(code, { language: lang }).value,
})

const output = computed(() => marked(input.value))

// 使用防抖函数来限制输入框的更新频率，避免频繁触发更新
// 当用户输入时，延迟100毫秒后更新input的值
const update = debounce((e) => {
  input.value = e.target.value
}, 100)

</script>

<style lang="less" scoped>
.editor {
    margin: 20px;
    display: flex;
    height: 100vh;
    .input, .output {
        overflow: auto;
        width: 50%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
    .input {
        border: none;
        border-right: 1px solid #ccc;
        resize: none;
        outline: none;
        background-color: #f6f6f6;
        font-size: 16px;
        font-family: 'Arial', sans-serif;
    }
}
</style>